<template>
  <view class="pagesB tn-safe-area-inset-bottom">

    <swiper class="card-swiper" :current="cardCur" :circular="true" :autoplay="false" duration="500" interval="18000"
      @change="cardSwiper" :style="{paddingTop: vuex_custom_bar_height - 50  + 'px'}">
      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item image-banner" @click="tn('../series/series')">
          <!-- <image class="" :src="item.url" mode="heightFix" v-if="item.type=='image'" ></image> -->

          <view class="box">
            <view class="cube">
              <view class="front" style="background-image: linear-gradient(45deg, #f43f3b, #ec008c);opacity: 0.2;">
              </view>
              <view class="back" style="background-image: linear-gradient(45deg, #ff7612, #ff571c);opacity: 0.2;">
              </view>
              <view class="left" style="background-image: linear-gradient(45deg, #7FD02B, #9ddb47);opacity: 0.2;">
              </view>
              <view class="right" style="background-image: linear-gradient(45deg, #9000ff, #5e00ff);opacity: 0.2;">
              </view>
              <view class="top" style="background-image: linear-gradient(45deg, #6F68DF, #ec008c);opacity: 0.2;"></view>
              <view class="bottom" style="background-image: linear-gradient(45deg, #0070FF, #19CF8A);opacity: 0.2;">
              </view>

              <view class="in-front"
                style="background-image:url('https://cdn.nlark.com/yuque/0/2023/png/280373/1684559753546-assets/web-upload/e65b2ffd-16be-4933-9cd8-0d468a75a116.png');width: 200rpx;height: 200rpx;background-size: cover;overflow: hidden;">
              </view>
              <view class="in-back"
                style="background-image:url('https://cdn.nlark.com/yuque/0/2023/png/280373/1686108279713-assets/web-upload/80f2ca2c-6da3-49d6-829c-17f2d2e272eb.png');width: 200rpx;height: 200rpx;background-size: cover;overflow: hidden;">
              </view>
              <view class="in-left"
                style="background-image:url('https://cdn.nlark.com/yuque/0/2023/png/280373/1686109051466-assets/web-upload/a4c52d96-43c1-43a9-892f-f9da5870dccf.png');width: 200rpx;height: 200rpx;background-size: cover;overflow: hidden;">
              </view>
              <view class="in-right"
                style="background-image:url('https://cdn.nlark.com/yuque/0/2023/png/280373/1686109051409-assets/web-upload/984c06aa-500e-4f51-98a9-5cfc5ef271e6.png');width: 200rpx;height: 200rpx;background-size: cover;overflow: hidden;">
              </view>
              <view class="in-top"
                style="background-image:url('https://cdn.nlark.com/yuque/0/2023/png/280373/1686109742515-assets/web-upload/2bffcb18-827b-4b3f-add1-d58420a5b20a.png');width: 200rpx;height: 200rpx;background-size: cover;overflow: hidden;">
              </view>
              <view class="in-bottom"
                style="background-image:url('https://cdn.nlark.com/yuque/0/2023/png/280373/1686109742730-assets/web-upload/48601236-d1cb-4f78-a0dc-80f2a21525a8.png');width: 200rpx;height: 200rpx;background-size: cover;overflow: hidden;">
              </view>
            </view>
          </view>


        </view>
        <view class="swiper-item-text tn-text-center">
          <view class="tn-padding-top-xs tn-color-white" style="opacity: 0.6;">
            <text class="tn-icon-copy tn-padding-right-xs"></text>
            {{item.name}}
            <text class="tn-icon-copy tn-padding-left-xs"></text>
          </view>
        </view>

      </swiper-item>
    </swiper>


    <view class="indication">
      <block v-for="(item,index) in swiperList" :key="index">
        <view class="spot tn-text-center tn-padding-top tn-shadow-blur tn-color-white"
          :class="cardCur==index?'active':''" @tap.stop="handleSwiperClick(index)">
          <view class="tn-text-xxl icon-text" :class="'tn-icon-'+ item.icon + ';' "></view>
          <!-- <view class="">{{item.text}}</view> -->
          <view class="tn-text-sm tn-padding-top-sm">{{item.get}}</view>
        </view>
      </block>
      <view class="indication-bg"
        style="background-image:url('https://cdn.nlark.com/yuque/0/2023/png/280373/1686064780453-assets/web-upload/3d596ae5-2459-40ef-aeec-bac16cf36dd6.png');opacity: 0.08;">
      </view>
    </view>

    <!-- 悬浮按钮-->
    <view class="tn-flex tn-footerfixed" @click="showModal1">
      <view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
        <tn-button shape="round" backgroundColor="#FFFFFF10" padding="40rpx 0" width="50%"
          >
          <text class="tn-color-white">立 即 购 买</text>
        </tn-button>
      </view>
    </view>
    
    <tn-modal v-model="show1" :custom="true" :showCloseBtn="false">
      <view class="custom-modal-content" @click="tn('../box/box')">
        <view class="tn-flex-1 justify-content-item tn-text-center">
          <tn-button backgroundColor="#16171D" padding="40rpx 0" width="100%" fontBold>
            <text class="tn-color-white">霸气十连 269￥</text>
          </tn-button>
        </view>
        <view class="tn-flex-1 justify-content-item tn-margin-top-lg tn-text-center">
          <tn-button backgroundColor="#16171D" padding="40rpx 0" width="100%" fontBold>
            <text class="tn-color-white">一发入魂  29￥</text>
          </tn-button>
        </view>
      </view>
    </tn-modal>

    <view class="tn-tabbar-height"></view>
    <view class="bg-tabbar-shadow"></view>

  </view>
</template>

<script>
  export default {
    name: 'PagesB',
    data() {
      return {
        show1: false,
        cardCur: 2,
        swiperList: [{
          id: 0,
          type: 'image',
          name: '累计129人购买',
          get: '已购买',
          icon: 'fireworks',
        }, {
          id: 1,
          type: 'image',
          name: '累计432人购买',
          get: '已购买',
          icon: 'fireworks',
        }, {
          id: 2,
          type: 'image',
          name: '累计309人购买',
          get: '已购买',
          icon: 'fireworks',
        }, {
          id: 3,
          type: 'image',
          name: '累计322人购买',
          get: '已购买',
          icon: 'fireworks',
        }, {
          id: 4,
          type: 'image',
          name: '累计908人购买',
          get: '未购买',
          icon: 'cube',
        }],
      }
    },
    methods: {
      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
      // swiper点击事件
      handleSwiperClick(index) {
        this.cardCur = index
      },
      // 跳转
      tn(e) {
        uni.navigateTo({
          url: e,
        });
      },
      
      // 弹出模态框
      showModal1(event) {
        this.openModal1()
      },
      // 打开模态框
      openModal1() {
        this.show1 = true
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pagesB {
    max-height: 100vh;
  }

  /* 底部安全边距 start*/
  .tn-tabbar-height {
    min-height: 60rpx;
    height: calc(80rpx + env(safe-area-inset-bottom) / 2);
    height: calc(80rpx + constant(safe-area-inset-bottom));
  }

  /* 底部tabbar假阴影 start*/
  .bg-tabbar-shadow {
    // background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, rgba(255,255,255,0) , rgba(255,255,255,0));
    box-shadow: 0rpx 0rpx 220rpx 0rpx rgba(0, 0, 0, 0.55);
    position: fixed;
    bottom: -100rpx;
    height: 100rpx;
    width: 100vw;
    z-index: 1;
  }

  /* 立方体1 */
  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }

  .box {
    margin: 0 275rpx 0 275rpx;
    perspective: 130px;
  }

  .cube {
    width: 100px;
    height: 100px;
    position: relative;
    transform: rotateX(-41deg) rotateY(-63deg);
    transform-style: preserve-3d;
    animation: rotate 20s infinite linear;
  }

  .cube>view {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 200px;
    font-size: 40px;
    font-weight: bold;
    color: #FFFFFF;
    background: #16171D33;
    border: 1px solid #FFFFFF;
    border-radius: 30rpx;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 5s ease-in;
  }

  .front {
    transform: translateZ(100px) scale(0.5);
  }

  .back {

    transform: translateZ(-100px) rotateY(-180deg) scale(0.5);
  }

  .left {
    transform: translateX(-100px) rotateY(-90deg) scale(0.5);
  }

  .right {
    transform: translateX(100px) rotateY(90deg) scale(0.5);
  }

  .top {
    transform: translateY(-100px) rotateX(90deg) scale(0.5);
  }

  .bottom {
    transform: translateY(100px) rotateX(-90deg) scale(0.5);
  }



  .in-front {
    transform: translateZ(65px);
  }

  .in-back {
    transform: translateZ(-65px) rotateY(180deg);
  }

  .in-left {
    transform: translateX(65px) rotateY(90deg);
  }

  .in-right {
    transform: translateX(-65px) rotateY(-90deg);
  }

  .in-top {
    transform: translateY(65px) rotateX(90deg);
  }

  .in-bottom {
    transform: translateY(-65px) rotateX(-90deg);
  }

  /* 视觉差轮播*/
  .card-swiper {
    height: 80vh !important;
  }

  .card-swiper swiper-item {
    width: 750rpx !important;
    left: 0rpx;
    box-sizing: border-box;
    overflow: initial;
  }

  .card-swiper swiper-item .swiper-item {
    margin-top: 20vh;
    width: 750rpx;
    height: 750rpx;
    border-radius: 0rpx;
    transform: translate(0rpx, 0rpx) scale(0.8);
    transition: all 0.2s ease-in 0s;
    will-change: transform;
    overflow: hidden;
    opacity: 1;
  }

  .card-swiper swiper-item.cur .swiper-item {
    transform: translate(0rpx, 0rpx) scale(1, 1);
    transition: all 0.2s ease-in 0s;
    will-change: transform;
    opacity: 1;
  }

  .card-swiper swiper-item .swiper-item-text {
    margin-top: -6vh;
    width: 100%;
    // height: 100%;
    display: block;
    border-radius: 10rpx;
    transform: scale(0.7, 0.7);
    transition: all 0.4s ease 0s;
    will-change: transform;
    overflow: hidden;
    opacity: 0;
  }

  .card-swiper swiper-item.cur .swiper-item-text {
    margin-top: -6vh;
    transform: scale(1);
    transition: all 0.4s ease 0s;
    will-change: transform;
    opacity: 1;
  }

  .image-banner {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .image-banner image {
    width: 400rpx;
    height: 400rpx;
  }

  /* 轮播指示点 start*/
  .indication {
    z-index: 9999;
    width: 100%;
    height: 36rpx;
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .indication-bg {
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -68vh;
    ;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 270rpx
  }

  .spot {
    opacity: 1;
    width: 100rpx;
    height: 80rpx;
    border-radius: 20rpx;
    margin: 20rpx 15rpx !important;
    left: 0rpx;
    right: 0;
    top: -63vh;
    position: relative;
  }

  .spot.active .icon-text {
    transform: scale(1.8);
    margin-bottom: 18rpx;
    opacity: 1;
  }

  /* 底部悬浮按钮*/
  .tn-footerfixed {
    position: fixed;
    width: 100%;
    bottom: 15vh;
    z-index: 9999;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
  }
  
</style>